import React from 'react';
import Button from "@material-ui/core/Button";
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import Slide from '@material-ui/core/Slide';
import makeStyles from "@material-ui/styles/makeStyles";
import Typography from "@material-ui/core/Typography";
import Grid from "@material-ui/core/Grid";
import Box from "@material-ui/core/Box";

const Transition = React.forwardRef(function Transition(props, ref) {
  return <Slide direction="up" ref={ref} {...props} />;
});

const useStyles = makeStyles(theme => ({
  buttonCancelStyle: {
    marginRight: theme.spacing(1)
  },
  buttonContainedError: {
    color: theme.palette.common.white,
    backgroundColor: theme.palette.error.main,
    '&:hover': {
      backgroundColor: theme.palette.error.dark,
    },
  },
  buttonSecondary: {
    marginRight: theme.spacing(1),
  },
  dialogActionStyles: {
    margin: theme.spacing(0, 2, 1, 0)
  }
}))


export default function ModalMessage(props) {
  // Props
  const {
    openDialog,
    setOpenDialog,
    dialogTitle,
    dialogPrimaryContext,
    dialogSecondaryContext,
    primaryAction,
    primaryButton,
    secondaryAction,
    secondaryButton,
    tertiaryAction,
    tertiaryButton,
    disableOnClose
  } = props;

  // Local constants
  const classes = useStyles();

  return (
    <Dialog
      open={openDialog}
      TransitionComponent={Transition}
      keepMounted
      onClose={disableOnClose ? "" : () => setOpenDialog(!openDialog)}
      maxWidth="sm"
      fullWidth={true}
    >
      <DialogTitle>
        <Grid container direction="column">
          <Typography variant="h6"><b>{dialogTitle}</b></Typography>
        </Grid>
      </DialogTitle>

      <DialogContent>
        <DialogContentText>
          <Box> {dialogPrimaryContext} </Box>
        </DialogContentText>
        <DialogContentText>
          <Box> {dialogSecondaryContext} </Box>
        </DialogContentText>
      </DialogContent>

      <DialogActions className={classes.dialogActionStyles}>
        <Button onClick={tertiaryAction} size="large" color="inherit" className={classes.buttonCancelStyle}>
          {tertiaryButton}
        </Button>
        {secondaryButton ? <Button variant='outlined' onClick={secondaryAction} className={classes.buttonSecondary}>
          {secondaryButton}
        </Button> : ""}
        {primaryButton === "error" || primaryButton === "remove" || primaryButton === "delete" || primaryButton === "reset" ? (
          <Button variant='contained' onClick={primaryAction} className={classes.buttonContainedError}>
            {primaryButton}
          </Button>
        ) : <Button variant='contained' onClick={primaryAction} color="primary">
          {primaryButton}
        </Button>
        }
      </DialogActions>
    </Dialog>
  )
}

